<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>添加商品</title>
<script>
   function jiaxiang(wang){
       window.location.href=wang;
   }
</script>
</head>
<style>
  .p1{
   height: 6%;
   width: 100%;
   position: absolute;
   left: 0px;
   top: 0px;
   border-bottom: 1px solid #ECECFF;
  }
  .p2{
   height: 100%;
   width: 20%;
   position: absolute;
   left: 0px;
   top: 0px;
  }
  .read{
    font-size: 16px;
    position: absolute;
    height: 70%;
    width: 80%;
    top: 6px;
    left: 40px;
    font-weight: bold;
}
  .p3{
     width: 60%;
     height: 100%;
     position: absolute;
     top:10%;
     left:20%;  
     border: 1px solid #e4e4ff;
     border-radius: 5px;
  }
  .p4{
    width: 50%;
     height: 5%;
     position: absolute;
     top:15%;
     left:25%;    
  }
  .p5{
    width: 50%;
     height: 5%;
     position: absolute;
     top:25%;
     left:25%;  
  }
  .p6{
    width: 50%;
     height: 5%;
     position: absolute;
     top:35%;
     left:25%;  
  }
  .p7{
    width: 50%;
     height: 5%;
     position: absolute;
     top:45%;
     left:25%; 
  }
  .p8{
    width: 50%;
     height: 5%;
     position: absolute;
     top:55%;
     left:25%;  
  }
  .p9{
    width: 50%;
     height: 5%;
     position: absolute;
     top:65%;
     left:25%;  
  }
  .p10{
    width: 50%;
     height: 5%;
     position: absolute;
     top:75%;
     left:25%;  
  }  
  .t1{
     width: 70%;
     height: 85%;
     position: absolute;
     top:5%;
     left: 20%;
     border-radius: 5px;
    border: 1px solid #ECECFF;
    outline: none;
  }
  .s4{
     position: absolute; 
     top: 5px;
     left: 10px;
  }
  .t2{
     width: 70%;
     height: 70%;
     position: absolute;
     top:5%;
     left: 20%;
     border-radius: 5px;
    border: 1px solid #ECECFF;
    outline: none;
  }

  .s5{
     position: absolute; 
     top: 5px;
     left: 10px;
  }
  .t3{
     width: 70%;
     height: 70%;
     position: absolute;
     top:5%;
     left: 20%;
     border-radius: 5px;
    border: 1px solid #ECECFF;
    outline: none;
  }
  .s6{
     position: absolute; 
     top: 5px;
     left: 10px;
     
  }
  .t4{
     width: 70%;
     height: 70%;
     position: absolute;
     top:5%;
     left: 20%;
     border-radius: 5px;
    border: 1px solid #ECECFF;
    outline: none;
  }
  .s7{
     position: absolute; 
     top: 5px;
     left: 10px;
  }
  .t5{
     width: 70%;
     height: 70%;
     position: absolute;
     top:5%;
     left: 20%;
     border-radius: 5px;
    border: 1px solid #ECECFF;
    outline: none;
  }
  .s8{
     position: absolute; 
     top: 5px;
     left: 10px;
  }
  .t6{
     width: 70%;
     height: 70%;
     position: absolute;
     top:5%;
     left: 20%;
     border-radius: 5px;
    border: 1px solid #ECECFF;
    outline: none;
  }
  .s9{
     position: absolute; 
     top: 5px;
     left: 10px;
  }
  .t7{
     width: 70%;
     height: 70%;
     position: absolute;
     top:5%;
     left: 20%;
     border-radius: 5px;
    border: 1px solid #ECECFF;
    outline: none;
  }
  .s10{
     position: absolute; 
     top: 5px;
     left: 10px;
  }
  .s11{
      font-size: 20px;
      color: lightslategray;
      position: absolute; 
      top: 5%;
      left: 10%;
  }

  .b1 {
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 padding: 4px 8px;
 text-align: center;
 background-color: #7D7DFF;
 color: white;
 border: 0px solid #7D7DFF;
 border-radius:4px;
 position: absolute;
 top:90%;
 left:45%;
 width: 150px;
 }
 .b1:hover {
 background-color: #b7b7f8;
 color: white;
 }
</style>
</head>

<body>
<div class="p1">
   <div class="p2">
      <span class="read">首页 <span style="color: #ADADAD;">/</span> 商品 <span style="color: #ADADAD;">/</span> <span style="color: #ADADAD;font-weight: 200;font-size: 13px;">添加商品</span></span>
   </div>
</div>
<div class="p3">
   <span class="s11">①填写商品信息</span>
    <div class="p4">
    <span class="s4">商品分类：</span>
    <input type="text" placeholder="请选择" class="t1" list="l1"> 
            <datalist id="l1">
                <option>服装</option>
                <option>手机数码</option>
                <option>电器</option>
                <option>家具家装</option>
            </datalist>
    </div>
    <div class="p5">
    <span class="s5">商品名称：</span>
    <input type="text" class="t2" value=""/> 
    </div>
    <div class="p6">
    <span class="s6">商品介绍：</span>
    <input type="text" class="t3" placeholder="请输入商品内容" value=""/>
    </div>
    <div class="p7">
    <span class="s7">商品货号：</span>
    <input type="text" class="t4" value=""/> 
    </div>
    <div class="p8">
    <span class="s8">售价：</span>
    <input type="text" class="t5" value=""/> 
    </div>
    <div class="p9">
    <span class="s9">市场价：</span>
    <input type="text" class="t6" value=""/>  
    </div>
    <div class="p10">
    <span class="s10">商品库存：</span>
    <input type="text" class="t7" value=""/> 
    </div>

    <input type="button" value="下一步，填写商品促销" class="b1" onclick="jiaxiang('添加商品2.html')">

</div>






</body>
</html>